<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>字幕设置</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css?v=1" />
    <link rel="stylesheet" type="text/css" href="css/popup.css?v=2" />
    <script src="js/config.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=78"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="js/vue/vue-router.js"></script>
    <script src="js/srt.js?v=7"></script>
    <script src="js/moment.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <style>
        .setButton {
            text-align: center;
            margin: 30px 0;
        }
        .setButton .btn {
            background: #33CC66; border-radius: .06rem
        }
        .zimu-setting{
          display:flex;
          justify-content: center;
          margin-top:0.28rem;
        }
        .zimu-setting  > .left{
          font-size:0.5rem;
        }
        .zimu-setting .number{
          font-size:0.38rem;
          width:1rem;
          border:1px solid silver;
        }
        .zimu-setting > .right{
          font-size:0.5rem;
        }
    </style>
</head>

<body>
    <div class="remind-study" id="app" >  
      <nav-top-bar golink="/wode.html" linktitle="字幕设置"></nav-top-bar>
  </nut-range>
      <div :style="{textAlign:'center',fontSize:value/100+'rem'}">this is english</div>
      <div :style="{textAlign:'center',fontSize:value/100+'rem'}">这是中文</div>
      <div class="zimu-setting">
        <nut-stepper 
        :value.sync="value" 
        :min="28" 
        :max="100"        
        :simple="false"
    ></nut-stepper>
      </div>
      <div class="setButton">
        <nut-button @click="setFont" class="btn">确定</nut-button>
      </div>
    </div>
</body>
<script>
    var signApp = new Vue({
        el: "#app",
        data: {
            value:32,
        },
        created() {
          this.getFont()
        },
        methods: {
          getFont(){
            axios.get("/mp/user/getfont").then(res=>{
              this.value = res.data
            })
          },
          setFont() {
                axios.post('/mp/user/setfont', {
                    size:this.value
                }).then(res => {
                    if (res.status !== 200) {
                        alert('设置失败');
                    }else {
                        alert('设置成功');
                    }
                    window.location.href = 'wode.html'
                });
            }
        }
    });

</script>

</html>